<template>
	<view>
		<nav-header left-icon-color="white" title="交易记录" :show-right="false" bg-color="transparent" :fixed="false"
			:show-border="false"></nav-header>
		<view>
			<up-collapse @change="change" @close="close" @open="open" :value="['Docs guide']">
				<up-collapse-item title="文档指南" name="Docs guide" v-for="(item,index) in groupedData" :key="index">
					<template #title>
						<text class="u-page__item__title__slot-title">{{item.date}}</text>
						<view class="total">
							<text>支出￥{{-item.totalExpense || 0}}，收入￥{{item.totalIncome || 0}}</text>
						</view>
					</template>
					<view class="record">
						<view v-for="(it,i) in item.items" :key="i" @click="goDetail(it)">
							<view class="record-content">
								<view class="icon">
									<svg-icon :width="70" icon="提现2" v-if="it.fee < 0"></svg-icon>
									<svg-icon :width="70" icon="充值2" v-if="it.fee>0 && it.targetType==0"></svg-icon>
									<svg-icon :width="70" icon="注册" v-if="it.fee>0 && it.targetType==3"></svg-icon>
								</view>
								<!-- <img :src="it.img" alt="" class="recode-img"> -->
								<view class="content"
									:style="{ 'border-bottom': i === item.items.length - 1 ? 'none' : '1rpx solid #d8d8d8' }">
									<view class="title">
										<view class="name">
											<!-- <text class="u-collapse-content" v-if="it.sub">{{it.sub}}-</text> -->
											<text class="u-collapse-content">{{it.sub}}-{{it.desc}}</text>
										</view>
										<view>
											<text v-if="it.fee<0" class="del">{{it.fee}}</text>
											<text v-if="it.fee>0" class="add">+{{it.fee}}</text>
										</view>
									</view>
									<text class="time">
										{{it.createAt}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</up-collapse-item>
			</up-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						createTime: "2022年12月30日 19:11:08",
						type: "1",
						sub: "退款",
						name: "有家便利店",
						money: "10.00",
						img: "https://www.51xxsp.com/storage/uploads/image/2022/10/28/e8f44d2317e5b90d45cdc043694ee69e.jpg"
					},
					{
						createTime: "2022年12月28日 18:22:22",
						type: "0",
						sub: "",
						name: "711便利店",
						money: "53.00",
						img: "https://img1.baidu.com/it/u=3464014714,1178911310&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
					},
					{
						createTime: "2022年12月22日 18:22:22",
						type: "0",
						sub: "",
						name: "711便利店",
						money: "53.00",
						img: "https://img1.baidu.com/it/u=3464014714,1178911310&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
					},
					{
						createTime: "2022年12月20日 18:22:22",
						type: "0",
						sub: "",
						name: "711便利店",
						money: "53.00",
						img: "https://img1.baidu.com/it/u=3464014714,1178911310&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
					},
					{
						createTime: "2022年6月18日 16:22:18",
						type: "0",
						sub: "转账",
						name: "给李四",
						money: "1000.00",
						img: "https://img0.baidu.com/it/u=3600954679,641662266&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
					},
					{
						createTime: "2022年5月28日 15:31:08",
						type: "1",
						sub: "红包",
						name: "超越",
						money: "30.00",
						img: "https://ww1.sinaimg.cn/mw690/006joT8tgy1hu5i7uy6kqj312w12w79w.jpg"
					}
				],
				groupedData: [],
			}
		},
		methods: {
			goDetail(item) {
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: `/pageSubOne/wallet/wallet-detail?data=${data}`
				})
			},
			getData() {
				this.$http({
					url: `/wallet/log/list`,
					method: 'GET',
					data: {
						pageSize: this.tradeList && this.tradeList.pageSize || 20,
						pageNum: this.tradeList && this.tradeList.pageNum || 1,
					}
				}).then(res => {
					console.log(res)
					this.list = res.list
					console.log(this.list)
					this.list.forEach(item => {
						// item.diviTime = this.getYearMonth(item.createAt)
						item.diviTime = item.createAt.slice(0, 7)
						if (item.targetType == 0) {
							item.sub = "充值"
						} else if (item.targetType == 1) {
							item.sub = "提现"
						} else if (item.targetType == 3) {
							item.sub = "邀请"
						}
					})
					this.groupDataByDate(this.list)
				})
			},
			groupDataByDate(list) {
				const grouped = list.reduce((acc, item) => {
					const date = item.diviTime
					if (!acc[date]) {
						acc[date] = []
					}
					acc[date].push(item);
					return acc
				}, {})

				this.groupedData = Object.keys(grouped).map(date => ({
					date: date,
					items: grouped[date]
				}))

				this.groupedData.forEach(item => {
					let totalIncome = 0; // 初始化总收入
					let totalExpense = 0; // 初始化总支出
					item.items.forEach(it => {
						const month = it.diviTime
						const money = parseFloat(it.fee)
						const type = it.targetType

						if (type == 0 || type == 3) {
							totalIncome += money
						} else if (type == 1) {
							totalExpense += money
						}
					})
					this.$set(item, 'totalIncome', totalIncome)
					this.$set(item, 'totalExpense', totalExpense)
				})

				console.log(this.groupedData)
			},
			getYearMonth(createTime) {
				// 使用正则表达式提取年月
				const match = createTime.match(/^(\d{4}-\d{1,2}-)/);
				if (match) {
					return match[1];
				} else {
					return null; // 或抛出错误，取决于你的错误处理策略
				}
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			}
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.u-cell__body) {
		color: #000;
		background-color: #F4F8FB !important;
	}

	:deep(.u-icon__icon.uicon-arrow-right.u-iconfont) {
		color: #000 !important;
		font-weight: bold;
	}

	.total {
		color: #aaa;
		font-size: 28rpx;
		font-weight: normal;
	}

	.record {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.record-content {
		display: flex;
		align-items: center;
		gap: 16rpx;

		.content {
			display: flex;
			flex-direction: column;
			height: 100rpx;
			margin-top: 20rpx;
			gap: 12rpx;
			flex: 1;

			.title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					width: 100%;
					color: #000;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}

				.add {
					color: $warning-500;
					font-size: 32rpx;
				}

				.del {
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}

		.recode-img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}
</style>